<script setup>
// 这个是ant-design-vue 组件库的封装
import { ref,onMounted } from 'vue';
import { getRoleList,delRole } from '@/api/index'
import { message  } from 'ant-design-vue'
import addRole from './v-model/components/add-role.vue'
const list = ref([])
const title = ref('')
const showDialog = ref(false)
const currentRole = ref(null); // 用于存储当前编辑的角色  
const columns = [
 {title: '角色名称', dataIndex: 'name', key: 'name'},
 {title: '启用', dataIndex: 'state', key: 'state'}, 
 {title: '描述', dataIndex: 'description', key: 'description'}, 
 {title: '操作', dataIndex:'operate'}    
]
const getRoleListAPI = async() => {
    list.value =  await getRoleList()
 }
const modalText = ref('确认要删除该角色吗？');
const open = ref(false);
const confirmLoading = ref(false);
 const delRoleARI =  ( ) => {
    open.value = true;
 }
 const handleOk = (id) => {
    modalText.value = '确认要删除该角色吗？';
    confirmLoading.value = true;
    delRole(id).then(()=>{
        message.success("删除角色成功")
        getRoleListAPI()
        open.value = false;
        confirmLoading.value = false;
    })
  };
 onMounted(()=>{
     // 挂载结束执行这个函数
     getRoleListAPI()
 })
 const h1Ref = ref()
 const ems = (row) => {
    if (row) {
        currentRole.value = { ...row }; // 复制当前角色数据  
        title.value = '编辑角色'; // 设置标题为编辑  
    } else {
        currentRole.value = null; // 新增角色时清空  
        title.value = '新增角色'; // 设置标题为新增  
    }
    showDialog.value = true;  
 }
</script>

<template>
  {{ showDialog }}
  <addRole v-model:showDialog="showDialog" @addSuccess="getRoleListAPI" :roleData="currentRole" :title="title"></addRole>
<a-button type="primary" @click="ems()">新增角色</a-button>
 <a-table :dataSource="list" :columns="columns">
    <template #bodyCell="{ record, column }">
        <a-space v-if="column.dataIndex === 'operate'">
            <a-button type="primary" @click="ems(record)">编辑</a-button>
            <a-button type="primary" danger @click="delRoleARI(record.id)">删除</a-button>
            <a-modal width="400px" v-model:open="open" title="提示" cancelText="取消" okText="确定" :confirm-loading="confirmLoading" @ok="handleOk(record.id)">
                <p>{{ modalText }}</p>  
            </a-modal>
        </a-space>
    </template>
</a-table>
</template>
